<template>
    <Modal :value="show" @on-visible-change="setVisibility" title="改派师傅">
        <Form :label-width="130" :model="form" :rules="formRules" ref="formValidate" v-if="ticket && ticket.id">
            <Form-item label="工单编号：">{{ticket.ticket_sn}}</Form-item>
            <Form-item label="详细地址：">
                {{
                concatAddress(ticket.home_info, 4, '-')
                }}
            </Form-item>
            <Form-item label="原实施工程师：">{{engineerInfo}}</Form-item>
            <Form-item label="新实施工程师：" prop="user_id">
                <Select clearable filterable v-model="form.user_id">
                    <Option
                        :disabled="e.id === ticket.engineer_id"
                        :key="index"
                        :value="e.id"
                        v-for="(e, index) in engineers"
                    >{{e.name}} - {{e.telephone}}</Option>
                </Select>
            </Form-item>
            <Form-item label="备注：" prop="description">
                <Input type="textarea" v-model="form.description"/>
            </Form-item>
        </Form>

        <div slot="footer">
            <Button @click="setVisibility(false)" type="text">取消</Button>
            <Button :loading="loading" @click="handleSubmit" type="primary">保存</Button>
        </div>
    </Modal>
</template>

<script>
// import find from 'lodash/find';
import { http, api } from '@/libs/http'
import util from '@/libs/util'

export default {
  name: 'change-engineer-modal',
  props: {
    show: Boolean,
    ticket: {
      required: true
    }
  },
  watch: {
    show (n) {
      if (!n) {
        this.$refs.formValidate.resetFields()
        setTimeout(() => {
          this.$emit('update:ticket', null)
        }, 500)
      } else {
        this.fetchEngineer()
      }
    }
  },
  computed: {
    engineerInfo () {
      const implementer = this.ticket.implementer
      return implementer ? implementer.name + ' ' + implementer.telephone : '原工程师不存在或已被删除'
    }
  },
  data () {
    return {
      form: {
        user_id: '',
        description: ''
      },
      formRules: {
        user_id: {
          required: true,
          message: '请选择新的工程师'
        }
      },
      engineers: [],
      originEngineer: {},
      loading: false
    }
  },
  methods: {
    concatAddress: util.concatAddress,
    setVisibility (val) {
      this.$emit('update:show', val)
    },
    fetchEngineer () {
      const data = {
        offset: 0,
        limit: 10000,
        role_id: 14
      }
      http.request(this, api.manager_list, null, data, (res, err) => {
        if (err) {
          this.$Message.error('获取列表失败')
        } else {
          this.engineers = res.rows
        }
      })
    },
    handleSubmit () {
      this.$refs['formValidate'].validate(valid => {
        if (valid) {
          this.changeEngineer()
        } else {
          this.$Message.error('表单验证失败!')
        }
      })
    },
    changeEngineer () {
      const ticket_list = [this.ticket.id]
      const data = {
        ticket_list,
        ...this.form
      }
      this.loading = true
      http.request(this, api.ticket_alloc, null, data, (res, err) => {
        this.loading = false
        if (err) return
        this.$Message.success('更换成功')
        this.setVisibility(false)
        this.$emit('refresh')
      })
    }
  }
}
</script>